<template >
  <div class="card">
    <div class="cardMainSearcch">
      <div class="searchContent">
        <el-form :inline="true" :model="queryForm" size="mini">
          <el-form-item label="卡卷类型">
            <el-input v-model="queryForm.cardType" :min="0" :max="10" controls-position="right" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="卡卷名称">
            <el-input v-model="queryForm.title" :min="0" :max="10" controls-position="right" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="卡卷状态">
            <el-input v-model="queryForm.cardStatus" :min="0" :max="10" controls-position="right" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="warning">重置</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button type="danger" icon="el-icon-plus" @click="editcard(null)">新建优惠券</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="cardMain" style="margin-top: 10px">
      <div class="tableContent">
        <el-table
          ref="cardtable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center">
          </el-table-column>
          <el-table-column
            prop="cardType"
            label="卡卷类型"
            align="center">
          </el-table-column>
          <el-table-column
            prop="cardName"
            label="卡卷名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="validTime"
            label="卡卷有效期"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="status"
            label="全部状态"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="inventory"
            align="center"
            label="库存"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="create"
            label="创建时间"
            align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="操作"
            width="140"
            align="center"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="clickAutoDetail(scope.row)">查看</el-button>
              <el-dropdown trigger="click" size="small">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="editCustomer(scope.row)">编辑</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteCustomer(scope.row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!-- 底部分页 -->
        <div class="bottom-pagination">
          <el-pagination
            :current-page.sync="pageNum"
            :page-sizes="[10, 15, 30, 50]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            background
            @size-change="handleSizeChange"
            @current-change="_getCustomerList">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      title="提示"
      width="50%">
      <div class="selectType">
        <div class="selectTip">选择你要创建的卡卷类型</div>
        <ul class="ulWrapper">
          <li class="liItem"><el-radio v-model="radio" label="1">折扣卷</el-radio></li>
          <div class="liItemTips">
            可为用户提供消费折扣，支持优惠抵扣快速买单
          </div>
          <li class="liItem"><el-radio v-model="radio" label="2">代金券</el-radio></li>
          <div class="liItemTips">
            可为用户提供抵扣现金服务。可设置成为“满*元，减*元”，支持优惠抵扣快速买单
          </div>
          <li class="liItem"><el-radio v-model="radio" label="3">优惠券</el-radio></li>
          <div class="liItemTips">
            即“通用券”，建议当以上四种无法满足需求时采用
          </div>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleNewCard">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Dialog, Radio } from 'element-ui'
export default {
  components: {
    Dialog, Radio
  },
  data() {
    return {
      cardTemp: null,
      radio: '1',
      dialogVisible: false,
      queryForm: {
        cardType: '',
        title: '',
        cardStatus: ''
      },
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 500,
      tableData: [{
        cardType: '优惠券',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }, {
        cardType: '优惠券',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }, {
        cardType: '优惠券',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }, {
        cardType: '折扣券',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }, {
        cardType: '优惠券',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }, {
        cardType: '折扣卷',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }, {
        cardType: '代金券',
        cardName: '王小虎',
        validTime: '2016-05-03 ~ 2018-05-03',
        status: 'OK',
        inventory: 5,
        create: '2016-05-03'
      }],
      multipleSelection: [],
      currentPage: 1
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      console.log(`每页${val}条`)
    },
    _getCustomerList(val) {
      console.log(`当前页:${val}`)
    },
    clickAutoDetail() {
      this.$router.push('/card/carddetail')
    },
    editcard(card) {
      this.cardTemp = card
      this.dialogVisible = true
      // 编辑
      // this.$router.push({
      //   path: '/cardedit',
      //   query: {
      //     id: card && card.id
      //   }
      // })
    },
    // 跳转到新建卡卷页面
    handleNewCard() {
      this.$router.push({
        path: '/card/cardedit',
        query: {
          id: this.cardTemp && this.cardTemp.id,
          type: this.radio
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.card {
  padding: 10px 20px;
  .cardMainSearcch {
    padding: 18px 10px 0px 10px;
    background-color: white;
  }
  .cardMain {
    padding: 10px;
    background-color: white;
  }
}
.el-dropdown-link {
  color: $color-primary;
  margin-left: 15px;
  cursor: pointer;
  font-size: $font-size-mini;
}
.bottom-pagination {
  text-align: right;
  margin-top: 20px;
}
.building-detail {
  min-height: 60vh;
  list-style: none;
  .item {
    color: $color-text-1;
    line-height: 1.4;
    label {
      color: $color-text-3;
      font-weight: 300;
      font-size: 15px;
      margin-right: 20px;
    }
  }
  .item + .item {
    margin-top: 12px;
  }
}

.selectType {
  .selectTip {
    color: black;
    padding-left: 20px;
  }
  .ulWrapper {
    margin-left: -20px;
    margin-top: 20px;
    list-style: none;
    .liItem {
      margin-bottom: 15px;
    }
    .liItemTips {
      padding-left: 23px;
      margin-top: -10px;
      padding-bottom: 20px;
    }
    &:last-child {
      margin-bottom: -30px;
    }
  }
}
</style>

<style>
.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
  color: #909399;
  font-family: '宋体';
  font-size: 14px;
}
</style>
